import React from "react";
import ReactDOM from "react-dom";

// 创建虚拟DOM
// const span = React.createElement("span", null, "我是一个span标签");
// const div = React.createElement("div", null, span);

let msg = "hello react";
let flag = true;
let list = ["吃饭", "睡觉", "上钟"];

function show() {
  if (flag) {
    return "显示";
  } else {
    return "隐藏";
  }
}

// jsx --> 虚拟DOM --> 真实DOM
// 使用jsx创建虚拟DOM
const div = (
  <div>
    <h2>1. 数据渲染</h2>
    <p>{1 + 1}</p>
    <p>{msg}</p>
    <h2>2. 属性绑定</h2>
    <p title={msg}>我是一个p标签</p>
    <h2>3.条件渲染</h2>
    <p>{flag ? "显示" : "隐藏"}</p>
    <p>{show()}</p>
    <h2>4.列表渲染</h2>
    {list.map((item) => {
      return <p key={item}>{item}</p>;
    })}
  </div>
);

ReactDOM.render(div, document.getElementById("root"));
